<template>
	<view class="themeItem">
		<!-- i am themeItem -->
		<!-- <navigator url="/pages/classlist/classlist" class="box" v-if="!isMore">
			<image class="pic" src="../../static/cute.jpg" mode="aspectFill"></image>
			<view class="mask"> i am mask </view>
			<view class="tab"> i am tab </view>
		</navigator> -->
		
		<!-- <navigator url="/pages/classlist/classlist" class="box" v-if="!isMore"> -->
		<!-- 跳转过去的时候需要传对应的id -->
		<navigator :url="'/pages/classlist/classlist?id=' + item._id + '&name=' + item.name " class="box" v-if="!isMore">
			{{item._id}}
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask"> {{item.name}} </view>
			<view class="tab"> i am tab {{timeDifference(item.updateTime)}}前更新 </view>
		</navigator>
		
		<!-- //完全遮罩 跳转到more -->
		<!-- 必须加上open-type="reLaunch"才能跳转到tabbar页面 -->
		<navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">
			<image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask"> 
				<!-- i am mask -->
				<view class="maskText"> More </view>
				<uni-icons type="more-filled" size="35" color="#fff"></uni-icons>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	
	import { timeDifference } from "@/utils/common.js";
	
	
	defineProps( {
		isMore:{
			type: Boolean,
			default: false
			
		},
		item:{
			type:Object,
			default(){
				return{
					name: "default name",
					picurl: "../../static/cute.jpg",
					updateTime: Date.now() - 1000*60*60*5
				}
			}
		}
	} );
	
</script>

<style lang="scss" scoped>
	.themeItem{
		.box{
			border-radius: 10rpx;
			overflow: hidden; //确保图片不会溢出
			height: 340rpx;
			position: relative;
			.pic{
				width: 100%;
				height: 100%;
			}
			.mask{
				// border: 1px solid red;
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.2);
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(25rpx); //磨砂玻璃
				font-weight: 600;
				font-size: 30rpx;
			}
			.tab{
				// border: 1px solid red;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(250,129,90,0.7);
				backdrop-filter: blur(25rpx);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 15rpx;
				border-radius: 0 0 6rpx 0;
				transform: scale(0.8);
				transform-origin: left top;
			}
		}
		
		// 这两个类同时存在的时候的样式
		.box.more{
			.mask{
				width: 100%;
				height: 100%;
				// flex-direction: column;
			}
			.maskText{
				font-size: 30rpx;
			}
		}
	}
</style>